<%@page language="java" contentType="text/html; charset=UTF-8"%>
<%
	String pageTitle = "INDEX";
%>
<jsp:include page="header.jsp"></jsp:include>
	<div class="page">
		<div class="container">
               <section id="dg-container" class="dg-container">
                   <div class="dg-wrapper">
                       <a href="product.html"><img src="../images/jx_1.jpg" alt="image01"><div></div></a>
                       <a href="product.html"><img src="../images/jx_2.jpg" alt="image02"><div></div></a>
                       <a href="product.html"><img src="../images/jx_3.jpg" alt="image03"><div></div></a>
                       <a href="product.html"><img src="../images/jx_4.jpg" alt="image04"><div></div></a>
                       <a href="product.html"><img src="../images/jx_5.jpg" alt="image05"><div></div></a>
                       <a href="product.html"><img src="../images/jx_6.jpg" alt="image06"><div></div></a>
                       <a href="product.html"><img src="../images/jx_7.jpg" alt="image07"><div></div></a>
                       <a href="product.html"><img src="../images/jx_8.jpg" alt="image08"><div></div></a>
                       <a href="product.html"><img src="../images/jx_9.jpg" alt="image09"><div></div></a>
                       <a href="product.html"><img src="../images/jx_10.jpg" alt="image10"><div></div></a>
                       <a href="product.html"><img src="../images/jx_11.jpg" alt="image11"><div></div></a>
                       <a href="product.html"><img src="../images/jx_12.jpg" alt="image12"><div></div></a>
                   </div>
                   <nav>
                       <span class="dg-prev">&lt;</span>
                       <span class="dg-next">&gt;</span>
                   </nav>
               </section>
           </div>
           <script type="text/javascript">
               var gallery = null;
               $(function() {
                   $('#dg-container').gallery();
                   gallery = $('#dg-container').data().gallery;
                   
                   //设置定时器，每隔1.5秒展示下一个图片
                   var timer = setInterval(showNext,1500);
                   //鼠标放在container上时停止转动，离开时继续转动
                   $('.container .dg-wrapper img').each(function() {
                       $(this).mouseover(function() {
                           clearInterval(timer);
                       }).mouseout(function() {
                           timer = setInterval(showNext,1500);
                       });
                   });
               });
               //自动轮转下一个图片
               function showNext() {
                   gallery._navigate("next");
               };
           </script>
	</div>
<jsp:include page="footer.jsp"></jsp:include>